import { useModel } from '@umijs/max';
import { Card } from 'antd';
import { useState } from 'react';
import PopupRight from './components/popupRight';
import styles from './styles.less';
export default () => {
  const { initialState } = useModel('@@initialState');
  const [open, setOpen] = useState(false);
  function changeOpen() {
    setOpen(!open);
  }
  return (
    <>
      <div style={{ padding: '20px' }}>
        <Card title="个人信息" bordered={false} style={{ width: 500 }}>
          <div className={styles.flexBetween}>
            <div className="label"> 用户名称：</div>
            <div className="value">{initialState?.currentUser?.name}</div>
          </div>
          <div className={styles.flexBetween}>
            <div className="label">手机号码：</div>
            <div className="value">{initialState?.currentUser?.phone}</div>
          </div>
          <div className={styles.flexBetween}>
            <div className="label">用户邮箱：</div>
            <div className="value">{initialState?.currentUser?.email}</div>
          </div>
          <div className={styles.flexBetween}>
            <div className="label">所属部门：</div>
            <div className="value">
              {initialState?.currentUser?.dept}/{initialState?.currentUser?.job}
            </div>
          </div>
          <div className={styles.flexBetween}>
            <div className="label">创建日期：</div>
            <div className="value">{initialState?.currentUser?.createTime}</div>
          </div>
          <div className={styles.flexBetween}>
            <div className="label">安全设置</div>
            <div
              className="value"
              style={{ color: '#317EF3', cursor: 'pointer' }}
              onClick={changeOpen}
            >
              修改密码
            </div>
          </div>
        </Card>
      </div>
      <PopupRight open={open} onClose={changeOpen}></PopupRight>
    </>
  );
};
